<template>


    <el-form :inline="true" :model="formData">
        <el-form-item label="部门名称">
            <el-input v-model="formData.deptName" placeholder="请输入关键字" clearable />
        </el-form-item>
        <el-form-item label="部门id">
            <el-input v-model="formData.deptId" placeholder="请输入关键字" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onsubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="add">新建</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="80" />
        <el-table-column fixed prop="deptId" label="部门编号" width="120" />
        <el-table-column prop="deptName" label="部门名称" width="100" />
        <el-table-column fixed prop="managerId" label="员工id" width="100" />
        <el-table-column fixed prop="location" label="位置" width="120" />
        
    </el-table>

</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'


const router = useRouter()

const tableData = ref<any>([])

const formData = reactive({ id: 0, deptId: "", deptName: "", managerId: "", location: "" })


onMounted(() => {

    callApi()
})



const onsubmit = () => {

    callApi()
}


const add = () => {

    router.push({ path: '/depT/add' })
}


const callApi = () => {

    deptmentApi.select().then((res: any) => {

        console.log(res)

        tableData.value = res
    })
}




</script>